import styled from 'styled-components';
import { NavLink, Outlet } from 'umi';

let StyleLayoutBox = styled.div`
  .nav-box {
    height: 50px;
    border-bottom: 1px solid red;

    a {
      display: inline-block;
      margin: 0 20px;
      color: #000;
      text-decoration: none; // 去掉下划线
      font-size: 20px;

      &.active {
        color: red;
      }
    }
  }
`;

export default function Layout() {
  return (
    <StyleLayoutBox>
      <div className="nav-box">
        {/* <NavLink> 是 <Link> 的特殊形态，他知道当前是否为路由激活状态。通常在导航菜单、面包屑、Tabs 中会使用，用于显示当前的选中状态。 */}
        <NavLink to="/">Vote</NavLink>
        <NavLink to="/counter">计数器</NavLink>
        <NavLink to="/doc">文档</NavLink>
        <NavLink to="/user">个人中心</NavLink>
      </div>
      <Outlet />
    </StyleLayoutBox>
  );
}
